<template>
  <div class="body">
    <div class="back" id="back">
        <div class="log" id="log">
            <div class="logtitle">Register</div><p></p>
            <form action="home" id="logbody" class="logbody" @submit.prevent="login">
                <input type="text" v-model="username" id="zh" size="20" class="txt" placeholder="账户">
                <br>
                <input type="password" v-model="password" id="mm" size="20" class="txt" placeholder="密码">
                <br>
                <input type="submit" value="注册" id="sub" class="sub">
                <router-link to="/login"><input type="button" value="返回登录" id="ykbt" class="ykbt"></router-link>
            </form>
        </div>
    </div>
    <div class="con" id="con">
        <div class="load">
            <div class="dot" style="--i:0"></div>
            <div class="dot" style="--i:1"></div>
            <div class="dot" style="--i:2"></div>
            <div class="dot" style="--i:3"></div>
            <div class="dot" style="--i:4"></div>
            <div class="dot" style="--i:5"></div>
            <div class="dot" style="--i:6"></div>
        </div>
    </div>
  </div>
</template>

<script>
  import "../assets/css/Loading.css";
  import "../assets/css/login.css";

  export default {
  data() {
    return {
      username: '',
      password: '',
      isLoading: true
    };
  },
  computed: {
    backStyle() {
      return {
        backgroundPositionX: `-${this.clientX / 10}px`,
        backgroundPositionY: `-${this.clientY / 15}px`
      };
    }
  },
  mounted() {
    this.startLoading();
  },
  methods: {
    login() {
      if (this.username === '' || this.password === '') {
        alert('账号或密码不能为空');
        return false;
      } else if (this.username !== '' || this.password !== '') {
        alert('注册成功\n账号：'+this.username+'\n密码：'+this.password);
        return false;
      }
    },
    startLoading() {
      setTimeout(() => {
        this.isLoading = false;
      }, 3000);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
